<template>
	<view class="download">
		<view class="tabs"><u-tabs :list="list" @click="changeType" :activeStyle="{color: '#126efd'}"
				:itemStyle="{width:'40%',height:'80rpx'}"></u-tabs></view>
		<view class="f fd-c ai-c" v-show="curt==0">
			<view class="wx-tip">
				下载文件，发送到微信文件传输助手
			</view>
			<image src="../../static/wx-download.png" class="wx-img"></image>
			<view class="wx-btn f ai-c jc-c" @click="handleDownload">
				<image src="../../static/wx.png"></image>下载到微信
			</view>
		</view>
		<view v-show="curt==1" class="pc">
			<view class="tip f ai-c">
				<view class="num">1.</view>
				<view>复制下载地址</view>
			</view>
			<view class="tip f ai-c">
				<view class="num">2.</view>
				<view>在任意浏览器粘贴下载</view>
			</view>
			<view class="url">{{download_url}}</view>
			<view class="wx-btn f ai-c jc-c" @click="handleCopy">
				复制链接
			</view>
		</view>

	</view>
</template>

<script>
	import {
		databaseInfo
	} from '@/api/index.js'
	export default {
		data() {
			return {
				list: [{
					name: '下载到微信',
				}, {
					name: '传输到电脑',
				}],
				curt: 0,
				download_url: '',
				id:null,
				fileData:null
			}
		},
		// computed: {
		// 	fileData() {
		// 		return this.$store.state.fileData
		// 	},

		// },
		// watch: {
		// 	fileData: {
		// 		handler(newVal, oldVal) {
		// 			this.getDetail()
		// 		},
		// 		immediate: true
		// 	}
		// },
		onLoad(options) {
			this.id=options.id
			this.getDetail()
		},
		methods: {
			handleCopy() {
				uni.setClipboardData({
					data: this.download_url, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			async getDetail() {
				const {
					data
				} = await databaseInfo({
					info_id: this.id,
					type: 1
				})
				this.download_url = data.download_url
				this.fileData=data
			},
			handleDownload() {
				uni.downloadFile({
					url: this.download_url,
					success: res => {
						if (res.statusCode === 200) {
							uni.shareFileMessage({
								filePath: res.tempFilePath,
								fileName: this.fileData.title+'.pdf'
							})
						}
					}
				})
			},
			changeType(e) {
				this.curt = e.index

			}
		}
	}
</script>

<style scoped lang="scss">
	.download {
		.pc {
			margin-top: 100rpx;
			padding: 0 48rpx;
			box-sizing: border-box;
		}

		.url {
			width: 100%;
			padding: 32rpx 48rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			border: 1px solid #126efd;
			border-radius: 24rpx;
			background: #f9fafe;
			color: #126efd;
			text-align: center;
			margin-top: 32rpx;
			word-wrap: break-word;
		}

		.tip {
			font-size: 28rpx;
			margin-bottom: 16rpx;

			.num {
				font-size: 32rpx;
				color: #126efd;
				font-weight: 800;
				margin-right: 4rpx;
			}
		}

		.wx-tip {
			font-size: 30rpx;
			margin-top: 100rpx;
		}

		.wx-img {
			width: 700rpx;
			height: 350rpx;
			margin-top: 32rpx;
		}

		.wx-btn {
			width: 500rpx;
			height: 80rpx;
			background: #126efd;
			border-radius: 16rpx;
			color: #fff;
			font-size: 28rpx;
			margin: 68rpx auto 0 auto;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
		}

		.tabs {
			width: 100%;
		}
	}
</style>